<template>
    <div :class="{box : true,b70 : tpx,b10 : !tpx}" v-if="myAudio.data.length && !$route.meta.notAudio">
        
        <div class="text-name" @click="DetailsShow">
            <p>{{myAudio.data[myAudio.index].name}}</p>
            <p>{{myAudio.data[myAudio.index].artist}}</p>
        </div>
        <div :class="{play : true,playgo : !this.myAudio.isshow,playfx : this.myAudio.isshow}" @click="onPlay"></div>
        <div class="lieb" @click="MyListShow"></div>
        <van-circle v-model="myAudio.currentRate" :rate="0" :speed="100" class="jingdu" :stroke-width="56" @click="DetailsShow"/>
        <van-image
        width="50"
        height="50"
        fit="fill"
        round
        @click="DetailsShow"
        :class="{img : true,playAM : this.myAudio.isshow}"
        :src="myAudio.imgUrl"
        />
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
    name : 'Myaudio',
    data() {
        return {
        }
    },
    created(){
    },
    mounted(){
        this.$nextTick(() => {
        })
    },
    methods : {
        ...mapMutations(['onPlay']),

        //打开歌曲列表
        MyListShow(){
            document.documentElement.style.overflowY = 'hidden';//禁止底层的div滚动
            this.MyList.isshow = true
        },
        //打开歌曲详情
        DetailsShow(){
            this.$router.push('/songDetail')
        },
    },
    computed : {
        tpx(){
            let s = this.$route.path
            return s == '/user' || s == '/home';
        },
        ...mapState(['myAudio', 'MyDateil', 'MyList'])
    }
}
</script>

<style scoped>
    .box{
        position: fixed;
        left: 10%;
        height: 35px;
        width: 80%;
        border-radius: 20px;
        background: #e9f4e4;
        transition: bottom 0.5s;
    }
    .b70{
        bottom: 68px;
    }
    .b10{
        bottom: 10px;
    }
    .img{
        margin-top: -8px;
        margin-left: -10px;
    }
    .play{
        position: absolute;
        top: 3px;
        right: 60px;
        width: 30px;
        height: 30px;
    }
    .lieb{
        position: absolute;
        top: 3px;
        right: 20px;
        width: 30px;
        height: 30px;
        background: url('../../assets/img/lieb.png');
        background-size: 100% 100%;
    }
    .text-name{
        position: absolute;
        top: 0;
        left: 15%;
        width: 40%;
    }
    .text-name>p:nth-child(1){
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--songName);
    }
    .text-name>p:nth-child(2){
        font-size: 8px;
        color: var(--artist);
    }
    .jingdu{
        position: absolute;
        left: -13px;
        top: -11px;
        height: 56px;
        width: 56px;
    }
</style>